<template>
    <div id="add-edit-orgMan">
        <el-form ref="ruleFormRef" size="default" label-width="auto" style="width: 100%;height: 100%;">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                    <el-form-item label="流程类型">
                        <!-- <el-select v-model="selectVal" @change="selectValChange" class="m-2" placeholder="请选择流程类型">
                            <el-option v-for="item in schemeTypeSelectList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select> -->
                        <el-select v-model="selectVal" @change="selectValChange" class="m-2" placeholder="请选择流程类型">
                            <el-option v-for="item in schemeTypeSelectList" :key="item.id" :label="item.schemeName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                    <el-form-item label="下一步审核人员" v-if="nextNode">
                        <el-select v-model="nodeDesignate" disabled>
                            <el-option v-for="item in nodeDesignateData" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                    <template v-if="isUser">
                        <el-form-item label="指定用户">
                            <el-col :md="18" :sm="18">
                                <el-input disabled="disabled" v-model="userName" />
                            </el-col>
                            <el-col :md="6" :sm="6">
                                <el-button icon="ele-Search" @click="setUser" />
                            </el-col>
                        </el-form-item>
                    </template>
                    <template v-if="isRole">
                        <el-form-item label="指定角色">
                            <el-col :md="18" :sm="18">
                                <el-input disabled="disabled" v-model="userName" />
                            </el-col>
                            <el-col :md="6" :sm="6">
                                <el-button icon="ele-Search" @click="setUser" />
                            </el-col>
                        </el-form-item>
                    </template>
                </el-col>
            </el-row>
        </el-form>
        <design-flow ref="vfd" :needShow="needShow"></design-flow>

        <user-created v-if="isUser" :isUseDialog="isUseDialogs" :repairInfo="repairInfos" @cancelUseClicks="cancelUseClick"
            @userLists="userLists" />
        <role-created v-if="isRole" :isUseDialog="isUseDialogs" :repairInfo="repairInfos" @cancelUseClicks="cancelUseClick"
            @roleLists="roleLists" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted , defineEmits } from 'vue';
import UserCreated from '/@/components/workFlow/userAndRole/user-created.vue';//用户
import RoleCreated from '/@/components/workFlow/userAndRole/role-created.vue';//角色
import DesignFlow from '/@/components/workFlow/FlowDesigner.vue';
// import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
import { getProcessTemplateApi } from '/@/api/workFlow/index';

const props = defineProps<{
    tempId?: any;
}>()
const emits: any = defineEmits();
// 选择用户逻辑
const isUseDialogs = ref(false);
const repairInfos = ref('');
const cancelUseClick = () => {
    isUseDialogs.value = false;
};
let userArrId: any = ref([]);
let userName = ref('');
const userLists = (val: any) => {
    if (val.titleCon.length > 0) {
        val.titleCon.forEach((item: any) => {
            userArrId.value.push(item.id);
            userName.value += item.name + ',';
        });
    }
    emits('ueseIdInfo',userArrId);
    cancelUseClick();
};
const roleLists = (val: any) => {
    if (val.titleCon.length > 0) {
        val.titleCon.forEach((item: any) => {
            userArrId.value.push(item.id);
            userName.value += item.name + ',';
        });
    }
    emits('ueseIdInfo',userArrId);
    cancelUseClick()
}
const setUser = () => {
    userName.value = '';
    userArrId.value = [];
    isUseDialogs.value = true;
};

const selectVal = ref('');
const nodeDesignate = ref('');
const nodeDesignateData = [
    { id: 'ALL_USER', name: '所有用户' },
    { id: 'SPECIAL_USER', name: '指定用户' },
    { id: 'SPECIAL_ROLE', name: '指定角色' },
    { id: 'RUNTIME_SPECIAL_ROLE', name: '运行时指定角色' },
    { id: 'RUNTIME_SPECIAL_USER', name: '运行时指定用户' },
]
const schemeTypeSelectList: any = ref([]);
const vfd = ref()
const needShow = ref(false);
const nextNode = ref(false);
const isRole = ref(false);
const isUser = ref(false);
const selectValChange = (val: number) => {
    vfd.value.clear();
    isRole.value = false;
    isUser.value = false;
    nodeDesignate.value = '';
    userName.value = '';
    userArrId.value = [];
    let itemVal = schemeTypeSelectList.value.filter((element: any) => {
        return element.id === val ? element : ''
    })
    setTimeout(() => {
        (vfd.value as any).loadFlow(itemVal[0].schemeContent);
    }, 10);

    let node = JSON.parse(itemVal[0].schemeContent);
    let nodeList = node.nodeList;
    let linkList = node.linkList;
    let nodeListItem = nodeList.filter((element: any) => {
        const startNode = element.id.split(' ')
        if (startNode[0] == 'start') {
            return element
        }
    })
    console.log(nodeListItem);
    let linkListItem = linkList.filter((element: any) => {
        return element.sourceId == nodeListItem[0].id ? element : ''
    })
    console.log(linkListItem);
    let nodeListTargetItem = nodeList.filter((element: any) => {
        return element.id == linkListItem[0].targetId ? element : ''
    });
    console.log(nodeListTargetItem);
    nextNode.value = nodeListTargetItem.forEach((element: any) => {
        nodeDesignate.value = element.setInfo.nodeDesignate;
        return element.setInfo.nodeDesignate == 'RUNTIME_SPECIAL_USER' || element.setInfo.nodeDesignate == 'RUNTIME_SPECIAL_ROLE'
    })

    if (nodeDesignate.value == 'RUNTIME_SPECIAL_USER') {
        isUser.value = true;
        isRole.value = false;
    } else if (nodeDesignate.value == 'RUNTIME_SPECIAL_ROLE') {
        isRole.value = true;
        isUser.value = false;
    } else {
        isRole.value = false;
        isUser.value = false;
    }
    emits('modelIdInfo',val);
}



onMounted(async () => {
    const res = await getProcessTemplateApi({ SchemeTypeCode: props.tempId })
    schemeTypeSelectList.value = res.data;
    console.log(res);
})
</script>
<style scoped lang="scss"></style>
